关于 Css3 Flex 浅析

发表于 | 分类于 ｜ kun

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

W3C提出的一种新的方案

Flex布局，可以简便、完整、响应式地实现各种页面布局。

浏览器支持

Flex

Flexible Box的缩写，意为”弹性布局”，
用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

1
2
3
.box{
    display: flex;
}

「inline-flex」 与 inline-block

1
2
3
4
5
6
7
8
9
10
11
12
.flex,
    .inline-flex{
        width:100px;
        height:50px;
        border:1px solid #000;
    }
    .flex{
        display:flex;
    }
    .inline-flex{
        display:inline-flex;
    }

demo

Webkit内核的浏览器，必须加上-webkit前缀。

1
2
3
4
.box{
    display: -webkit-flex; /* Safari */
    display: flex;
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

  • 采用Flex布局的元素，称为Flex容器，简称”容器”
  • 它的所有子元素自动成为容器成员，称为Flex项目，简称”项目”

flex布局发生在父容器和子容器之间。父容器需要有flex的环境(display:flex;)，子容器才能根据自身的属性来布局，简单的说，就是瓜分父容器的空间。相反就是说如果父容器没有flex的环境，那么子容器就无法使用flex的规则来划分父容器的空间。

  • 水平的主轴main axis和垂直的交叉轴（cross axis）
  • 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end
  • 交叉轴的开始位置叫做cross start，结束位置叫做cross end
  • 项目默认沿主轴排列
  • 单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

容器的属性 [6个]

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

(A1) flex-direction

「容器属性」决定主轴的方向（即项目的排列方向）

1
2
3
.box {
    flex-direction: row | row-reverse | column | column-reverse;
}
  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

Flex-direction Demo

1
2
3
.box {
    flex-direction: row | row-reverse | column | column-reverse;
}

demo

(A2) flex-wrap

###「容器属性」定义如果一条轴线排不下，如何换行

[默认情况下，项目都排在一条轴线上]

可取3个值

1
2
3
.box{
    flex-wrap: nowrap | wrap | wrap-reverse;
}

（1）nowrap（默认）：不换行

(2）wrap：换行，第一行在上方

(3) wrap-reverse：换行，第一行在下方

demo 

1
2
3
4
5
6
7
8
9
.nowrap{
    flex-wrap:nowrap;
}
.wrap{
    flex-wrap:wrap;
}
.wrap-reverse{
    flex-wrap:wrap-reverse;
}

(A3) flex-flow

「容器属性」是flex-direction和flex-wrap的简写形式

[默认值为row nowrap]

1
2
3
.box{
    flex-flow: flex-direction || flex-wrap;
}

(A4) justify-content

「容器属性」定义了项目在主轴上的对齐方式

1
2
3
.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等
  • space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍

[下面假设主轴从左到右]

demo 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.flex-start{
    justify-content:flex-start;
}
.flex-end{
    justify-content:flex-end;
}
.center{
    justify-content:center;
}
.space-between{
    justify-content:space-between;
}
.space-around{
    justify-content:space-around;
}

demo

(A5) align-items

「容器属性」定义项目在交叉轴上如何对齐

1
2
3
.box {
        align-items: flex-start | flex-end | center | baseline | stretch;
    }

它可能取5个值，具体对齐方式与交叉轴有关

  • flex-start：交叉轴的起点对齐
  • flex-end：交叉轴的终点对齐
  • center：交叉轴的中点对齐
  • baseline: 项目的第一行文字的基线对齐
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

[下面假设交叉轴从上到下]

1
2
3
.box {
        align-items: flex-start | flex-end | center | stretch | baseline;
    }


demo

(A6) align-content

「容器属性」定义了多根轴线的对齐方式

[如果项目只有一根轴线，该属性不起作用]
1
2
3
.box {
       align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

它可能取6个值

  • flex-start：与交叉轴的起点对齐
  • flex-end：与交叉轴的终点对齐
  • center：与交叉轴的中点对齐
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  • space-around：每根轴线两侧的间隔都相等,所以轴线之间的间隔比轴线与边框的间隔大一倍
  • stretch（默认值）：轴线占满整个交叉轴

如果项目只有一根轴线，该属性不起作用

1
2
3
.box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

demo

##项目的属性 [6个]

  • order
  • flex-grow
  • flex-basis
  • flex-shrink
  • flex
  • align-self

(B1) order

「项目属性」定义项目的排列顺序

1
2
3
.item {
        order: 1;
    }

[数值越小,排列越靠前，默认为0]

order Demo

demo

1
2
3
4
5
6
7
8
9
10
11
12
.order1{
        order:1;
        background:#c00;
    }
    .order2{
        order:2;
        background:#069;
    }
    .order3{
        order:3;
        background:#095;
    }

demo

(B2) flex-grow

「项目属性」定义项目的放大比例

[默认为0,即如果存在剩余空间，也不瓜分]

1
2
3
.   item {
        flex-grow: 0; /* default 0 */
    }

flex-grow Demo


如果所有项目的flex-grow属性都为1，
则它们将等分剩余空间（如果有的话）


如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍



    
    .item {
        flex-grow: 0; / default 0 /
    }

demo

[slide]

##(B3) flex-basis

###「项目属性」定义了在分配多余空间之前，项目占据的主轴空间（main size）

[浏览器根据这个属性，计算主轴是否有多余空间]

[它的默认值为auto，即项目的本来大小]

1
2
3
.item {
    flex-basis: 1 | auto; /* default auto */
}

flex-basis Demo

[我们通过案例来解释]

1
2
3
.item {
    flex-basis: 1 | auto; /* default auto */
}

demo

上面讲的flex-grow、flex-basis都是剩余空间的分配。但是，你有没有想过还有没有其他的情况呢？可以发现，上面讲的例子item1 item2 item3的宽度总和都是没有超过父容器的宽度的。 那如果三个子容器的宽度和超过父容器的宽度呢？那还有剩余空间可以分配吗，此时浏览器又是怎么处理呢？请看下面：

(B4) flex-shrink

「项目属性」定义了项目的缩小比例，默认为1

[即如果空间不足，该项目将缩小]

1
2
3
.item {
    flex-shrink: 1; /* default 1 */
}

flex-shrink Demo

[不太好理解 我们通过案例来解释]

1
2
3
.item {
    flex-grow: 1; /* default 0 */
}

demo

(B5) flex

「项目属性」简写，默认值为: 0 1 auto

flex-grow,flex-shrink 和 flex-basis

[后两个属性可选]

1
2
3
.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值

1
2
3
.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
  • auto (1 1 auto)
  • none (0 0 auto)

flex Demo

[建议优先使用这个属性,因为浏览器会推算相关值]

1
2
3
4
5
6
7
8
9
10
11
.item {
    flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>
}
.item1{
    flex:1 2 200px;
    background:#c00;
}
.item2{
    flex:2 1 100px;
    background:#069;
}

demo

(B6) align-self

「项目属性」允许单个项目有与其他项目不一样的对齐方式

[可覆盖align-items属性]

1
2
3
默认值为 auto, 表示继承父元素的align-items属性
如果没有父元素，则等同于stretch
1
2
3
.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

可取6个值，除了auto，其他都与align-items属性完全一致

1
2
3
.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

[slide]

align-self Demo

[建议优先使用这个属性,因为浏览器会推算相关值]

1
2
3
4
5
.item2{
    align-self:baseline;
    line-height: 30px;
    background:#095;
}

demo

容器的属性 [6个]

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

项目的属性 [6个]

  • order
  • flex-grow
  • flex-basis
  • flex-shrink
  • flex
  • align-self


参考资料


声明:本资料仅供学习交流，严禁使用于任何商业用途! 相关资料参考自mdn等开发者网站或技术大牛阮一峰、oxxo等博客内容。如有侵权可联系删除或添加出处来源。
如需转载，转载请注明出处。